<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    body {
        width: 100%;
        height: 600px;
        /* background-color: antiquewhite; */
        background-color: steelblue;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    #myCanvas {
        border: 1px solid black;
    }

    #Canvas {
        border: 1px solid black;
    }

    #cv {
        border: 1px solid black;
    }

    #star {
        border: 1px solid black;
    }
</style>

<body>
    <!-- 圆形 -->
    <canvas id="myCanvas" width="200" height="100"></canvas>
    <!-- 扇形 -->
    <canvas id="Canvas" width="400" height="300"></canvas>
    <!-- 太极 -->
    <canvas id="cv" width="365" height="400"></canvas>
    <!-- 五角星 -->
    <!-- 1.先给背景一个背景颜色，并设置一块画布。 -->
    <canvas id="star" style="width:300px;height:150px;"></canvas>
</body>
<script>
    //圆形
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.beginPath();
    ctx.arc(95, 50, 40, 0, 2 * Math.PI);
    ctx.stroke();

    //扇形
    var myCanvas = document.getElementById('Canvas');
    var ADD = myCanvas.getContext('2d');
    /*在中心位置画一个半径150px的圆弧右上角 扇形  边  填充 */
    var w = ADD.canvas.width;
    var h = ADD.canvas.height;
    /*把起点放到圆心位置*/
    ADD.moveTo(w / 2, h / 2);
    ADD.arc(w / 2, h / 2, 150, 0, -Math.PI / 2, true);
    /*闭合路径*/
    //ADD.closePath();
    ADD.fill();


    //太极
    // 2.画出一个半圆，背景颜色设为黑色。
    var cd = document.getElementById("cv")
    var cv = cd.getContext("2d");
    cv.arc(180, 210, 150, 0.5 * Math.PI, 1.5 * Math.PI, false)
    cv.fillStyle = "black";
    cv.fill();

    //3.画出另一个半圆，背景颜色设为白色
    cv.beginPath();
    cv.arc(180, 210, 150, 0.5 * Math.PI, 1.5 * Math.PI, true);
    cv.fillStyle = "white";
    cv.fill();

    //4.画出一个小的白色半圆，盖在黑色上面。
    cv.beginPath();
    cv.arc(180, 135, 75, 0.5 * Math.PI, 1.5 * Math.PI, false);
    cv.fillStyle = "white";
    cv.fill();

    // 5.画出一个小的黑色半圆，盖在白色大半圆上。
    cv.beginPath()
    cv.arc(180, 285, 75, 0.5 * Math.PI, 1.5 * Math.PI, true)
    cv.fillStyle = "black"
    cv.fill()

    // 现在，太极图的样子基本成型。
    // 6.分别画一个黑色小圆和一个白色小圆。
    //一个黑色小圆
    cv.beginPath();
    cv.arc(180, 140, 20, 0, 2 * Math.PI, false)
    cv.fillStyle = "black";
    cv.fill()

    //一个白色小圆
    cv.beginPath();
    cv.arc(180, 285, 20, 0, 2 * Math.PI, false)
    cv.fillStyle = "white";
    cv.fill();


    //五角星
    var ct = document.getElementById("star");//获取canvas对象
    var context = ct.getContext("2d");//构建2d环境
    context.beginPath();
    context.moveTo(70, 30);//作线的起点
    context.lineTo(30, 140);//线的终点
    context.lineTo(125, 70);
    context.lineTo(10, 70);
    context.lineTo(100, 140);
    context.closePath();//结束/闭合
    context.strokeStyle = "black";//线的颜色
    context.stroke();//线的输出

    context.beginPath();
    context.moveTo(200, 30);
    context.lineTo(160, 140);
    context.lineTo(257, 70);
    context.lineTo(140, 70);
    context.lineTo(231, 140);
    context.closePath();//结束/闭合
    context.fillStyle = "gold";//填充的背景色
    context.fill()//填充



</script>

</html>